<template>
  <div id="inner" style="width: 530px;height: 200px">
    <div v-for="(item, index) in value" :key="index"  class="circle">
      <span>{{item.deliveryArea}}</span>
      <span>{{item.totalWeight}}</span>
    </div>
  </div>
</template>
<script>
var ScreenConfig = {
  // 为属性赋初值
  ballsnum: 2,
  spring: 0.2,
  bounce: -0.9,
  gravity: 0.01
};
export default {
  data() {
    return {
      diameter: 0,
      ballsnum: 2,
      spring: 0.2,
      bounce: -0.9,
      gravity: 0.01,
      container: null
    };
  },
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {
    value(res) {
      this.newScreen("inner", {
        ballsnum: res.length, // 球数量
        spring: 0.002, // 球相碰后的反弹力
        bounce: -0.1, // 球碰到窗口边界后的反弹力
        gravity: 0.003// 球的重力
      });
    }
  },
  destroyed() {
    clearInterval(this.timer)
  },
  mounted() {
    
  },
  methods: {
    Ball(diameter, classn) {
      var ball = document.createElement("div");
      ball.className = classn;
      ball.style.width = diameter + "px";
      ball.style.height = diameter + "px";
      ball.style.borderRadius = '50%'
      ball.style.position = "absolute";
      ball.style.background = "red"
      return ball;
    },
    createBalls() {
      var self = this;
      var num = self.ballsnum;
      var ballArr = document.getElementById("inner")
      for (let i = 0; i < num; i++) {
        var ball = ballArr.children[i]
        ball.diameter = self.diameter;
        ball.radius = self.radius;
        ball.style.left = Math.random() * self.R_bound + "px"; // 球的初始位置，
        ball.style.top = Math.random() * self.B_bound + "px";
        ball.vx = Math.random() * 6 - 3;
        ball.vy = Math.random() * 6 - 3;
        self.balls.push(ball)
      }
    },
    moveBalls(ball) {
      var self = this;
      ball.vy += self.gravity;
      ball.style.left = ball.offsetLeft + ball.vx + "px";
      ball.style.top = ball.offsetTop + ball.vy + "px";
      // 判断球与窗口边界相碰，把变量名简化一下
      var L = self.L_bound;
      var R = self.R_bound;
      var T = self.T_bound;
      var B = self.B_bound;
      var BC = self.bounce;
      if (ball.offsetLeft < L) {
        ball.style.left = L;
        ball.vx *= BC;
      } else if (ball.offsetLeft + ball.diameter > R) {
        ball.style.left = R - ball.diameter + "px";
        ball.vx *= BC;
      } else if (ball.offsetTop < T) {
        ball.style.top = T;
        ball.vy *= BC;
      }
      if (ball.offsetTop + ball.diameter > B) {
        ball.style.top = B - ball.diameter + "px";
        ball.vy *= BC;
      }
    },
    getFlag(id) {
      return document.getElementById(id); // 获取元素引用
    },
    hitBalls() {
      var self = this;
      var num = self.ballsnum;
      var balls = self.balls;
      for (let i = 0; i < num - 1; i++) {
        var ball1 = self.balls[i];
        ball1.x = ball1.offsetLeft + ball1.radius; // 小球圆心坐标
        ball1.y = ball1.offsetTop + ball1.radius;
        for (let j = i + 1; j < num; j++) {
          var ball2 = self.balls[j];
          ball2.x = ball2.offsetLeft + ball2.radius;
          ball2.y = ball2.offsetTop + ball2.radius;
          var dx = ball2.x - ball1.x; // 两小球圆心距对应的两条直角边
          var dy = ball2.y - ball1.y;
          var dist = Math.sqrt(dx * dx + dy * dy); // 两直角边求圆心距
          var misDist = ball1.radius + ball2.radius; // 圆心距最小值
          if (dist < misDist) {
            // 假设碰撞后球会按原方向继续做一定的运动，将其定义为运动A
            var angle = Math.atan2(dy, dx);
            // 当刚好相碰，即dist=misDist时，tx=ballb.x, ty=ballb.y
            var tx = ball1.x + Math.cos(angle) * misDist;
            var ty = ball1.y + Math.sin(angle) * misDist;
            // 产生运动A后，tx > ballb.x, ty > ballb.y,所以用ax、ay记录的是运动A的值
            var ax = (tx - ball2.x) * self.spring;
            var ay = (ty - ball2.y) * self.spring;
            // 一个球减去ax、ay，另一个加上它，则实现反弹
            ball1.vx -= ax;
            ball1.vy -= ay;
            ball2.vx += ax;
            ball2.vy += ay;
          }
        }
      }
      for (let i = 0; i < num; i++) {
        self.moveBalls(balls[i]);
      }
    },
    initialize() {
      var self = this;
      self.createBalls();
      self.timer = setInterval(()=>{
        self.hitBalls();
      }, 30);
    },
    newScreen(cid, config) {
      // 先创建类的属性
      var self = this;
      var extend = function(des, src) {
        for (var p in src) {
          des[p] = src[p];
        }
        return des;
      };
      config = extend(ScreenConfig, config); // configj是extend类的实例    self.container=getFlag(cid);            // 窗口对象
      self.container = this.getFlag(cid);
      self.ballsnum = config.ballsnum;
      self.diameter = 80; // 球的直径
      self.radius = self.diameter / 2;
      self.spring = config.spring; // 球相碰后的反弹力
      self.bounce = config.bounce; // 球碰到窗口边界后的反弹力
      self.gravity = config.gravity; // 球的重力
      self.balls = []; // 把创建的球置于该数组变量
      self.timer = null; // 调用函数产生的时间id
      self.L_bound = 0; // container的边界
      self.R_bound = self.container.clientWidth; // document.documentElement.clientWidth || document.body.clientWidth 兼容性
      self.T_bound = 0;
      self.B_bound = self.container.clientHeight;
      this.initialize();
    }
  }
};
</script>

<style scoped>
.to,
.three,
.one,
.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  position: absolute;
  background: #02584B;
}
.circle span:nth-of-type(1){
  font-size: 10px;
}
.circle span:nth-of-type(2){
  font-size: 15px;
  font-family: "DIN Condensed Bold"
}
</style>